<template>
  <div :class="[item.isShowWhitelace == 1 ? 'c-ph24 c-pv24' : '', !isSetPageBackground ? 'c-bg-white' : '']">
    <div
      class="c-flex-row c-aligni-center c-pv12 c-pl20 c-pr32 c-p"
      :class="item.isShowWhitelace != 1 ? 'c-ph24 c-pv24' : ''"
      :style="('background-color:' + item.backgroundColor + '; color:' + item.textColor) + '; ' + getBorderRadius(borderRadius, '0.3rem')"
      @click="clickMore"
    >
      <img v-if="item.showAnnouncementIcon == 1" :class="item.AnnouncementIconStyle == 4 ? 'c-ww52' : item.AnnouncementIconStyle == 3 ? 'c-ww40' : 'c-ww32'" :src="require(item.AnnouncementIconStyle == 1 ? '@/assets/i/wap/index/annouceIcon1.png' : item.AnnouncementIconStyle == 2 ? '@/assets/i/wap/index/annouceIcon2.png' : item.AnnouncementIconStyle == 3 ? '@/assets/i/wap/index/annouceIcon3.png' : '@/assets/i/wap/index/annouceIcon4.png')" alt="" />
      <div class="c-hh34 c-ml16 c-mr12 c-p c-text-hidden lh0">
        <div class="c-flex-grow1 c-inlineblack c-ws-n c-hh34 c-lh34">
          <div class="c-fs24 c-ws-n c-p c-lh34 c-hh34" :class="actionMove" :style="animationSpeed">{{item.items.content}}</div>
        </div>
      </div>
      <i class="iconfont c-fs16 c-fc-gray c-pa c-p-r8 c-p-t0 c-h" :class="item.isShowWhitelace == 1 ? 'c-lh60' : 'c-lh80'" v-if="!!item.items.navId && !!item.items.linkModule">&#xe908;</i>
    </div>
  </div>
</template>

<script>
import { custIndex } from "@/mixin/custIndex.js";
import { customStyle } from '@/utils/customStyle.js'
export default {
  name: "announcementCom",
  mixins: [custIndex, customStyle],
  components: {},
  props: {
    item: {
      type: Object,
      default: null,
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
  },
  data() {
    return {
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  computed: {
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    actionMove() {
      if (this.item.items.content.length > 20) {
        return 'announceMove'
      } else {
        return ''
      }
    },
    animationSpeed() {
      const speed = 9 + this.item.items.content.length * 0.03
      return `animation-duration: ${speed}s; animation-timing-function: linear; animation-iteration-count: infinite`
    }
  },
  methods: {
    clickMore() {
      if (!this.item.items.navId && !this.item.items.linkModule) return
      let data = {
        linkModule: this.item.items.linkModule,
        navId: this.item.items.navId,
        url: this.item.items.url,
        navHref: this.item.items.navHref
      }
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      this.commonModuleRouterPush(data)
    },
  },
};
</script>

<style scoped>
@keyframes moveLong{
  from{
    left: 300px;
  }
  to{
    left: -100%;
  }
}
.announceMove {
  animation-name: moveLong;
}
.lh0 {
  line-height: 0;
}
</style>
